<template>
	<wsPage :title="$t('resource.ResourceManagement')">
		<div slot="page_operate">
			<Button type="ghost" @click="topList" v-if="!isPLevel"><Icon type="home"></Icon><span>{{$t('resource.top')}}</span></Button>
			<Button type="ghost" @click="preList" v-if="!isPLevel"><Icon type="ios-arrow-back"></Icon><span>{{$t('resource.upperLevel')}}</span></Button>
		</div>
		
		<wsSmPanel>
			<div slot="list_operate">
				<Button type="primary" @click="showAddModal">{{$t('resource.AddMenu')}}</Button>
			</div>
			<div slot="list_data">
				<div class="title-row">
					<span style="">{{$t('resource.CurrentPath')}}</span>
					<span v-for="(item, index) in history.parents">
						<span v-if="index > 0" style="padding: 0 3px;">></span>
					<a @click="listParent(item, index)" v-text="item.name"></a>
					</span>
				</div>
				<ws-table :data="table.datas" style="width: 100%">
					<ws-table-column :label="$t('resource.name')" min-width="180">
						<template slot-scope="scope">
							<a @click="listChilds(scope.row)">{{scope.row.name}}</a>
						</template>
					</ws-table-column>
					<ws-table-column :label="$t('resource.ResourceType')" min-width="180">
						<template slot-scope="scope">
							<span>{{scope.row.wType == 1 ? $t('resource.Module'): $t('resource.business')}}</span>
						</template>
					</ws-table-column>
					<ws-table-column :label="$t('resource.status')" min-width="180">
						<template slot-scope="scope">
							<span>{{scope.row.status == 1 ? $t('resource.Online') : $t('resource.Offline')}}</span>
						</template>
					</ws-table-column>
					<ws-table-column :label="$t('resource.Sort')" min-width="180">
						<template slot-scope="scope">
							<Button @click="menuUp(scope.row)" v-if="scope.$index != 0">{{$t('resource.MoveUp')}}</Button>
							<Button @click="menuDown(scope.row)" v-if="scope.$index != table.datas.length - 1">{{$t('resource.MoveDown')}}</Button>
						</template>
					</ws-table-column>
					<ws-table-column align="center" width="120" :label="$t('resource.operating')">
						<template slot-scope="scope">
							<Button @click="toPermissionPage(scope.row)" type="text" size="small">{{$t('resource.Permission')}}</Button>
							<Button  type="text" size="small">{{$t('resource.Obtained')}}</Button>
							<Button @click="showEditModal(scope.row)" type="text" size="small">{{$t('resource.edit')}}</Button>
							<Button @click="delConfirm(scope.row)" type="text" size="small">{{$t('resource.delete')}}</Button>
      					</template>
					</ws-table-column>
				</ws-table>
				<Table :columns="table.columns" :data="table.datas"></Table>
			</div>
		</wsSmPanel>
		
		<!--新增弹框-->
		<wsModal v-model="modal1.show" :ok-text="$t('resource.save')" :cancelText="$t('resource.Cancel')"   :title="$t('resource.addMenuResource')" @on-ok="saveModal1" @on-cancel="cancelModal1">
		    <Form ref="modal1" :model="modal1.model" :rules="modal1.rules" :label-width="100">
		        <FormItem :label="$t('resource.ResourceName')" prop="name">
		            <Input v-model="modal1.model.name" placeholder=""></Input>
		        </FormItem>	
		        <FormItem :label="$t('resource.ResourceType')">
		        	<RadioGroup v-model="modal1.model.wType">
		        		<Radio :label="1">{{$t('resource.tableContent')}}</Radio>
		        		<Radio :label="2">{{$t('resource.BusinessMenu')}}</Radio>
		        	</RadioGroup>
		        </FormItem>	
		        <FormItem :label="$t('resource.ServiceType')" v-if="modal1.model.wType == 2">
		        	<RadioGroup v-model="modal1.model.rType">
		        		<Radio :label="1">VUE组件</Radio>
		        		<Radio :label="2">URL</Radio>
		        	</RadioGroup>
		        </FormItem>			        
		        <FormItem :label="$t('resource.path')" prop="url"  v-if="modal1.model.wType == 2">
		            <Input v-model="modal1.model.url" placeholder=""></Input>
		        </FormItem>			        
		    </Form>			
		</wsModal>		
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				table: {
					datas: [],
					selectedRow: null //当前选择行
				},
				form: {
					curParentId: '-1', //当前的父节点
					paths: [], //显示层级路径
					names: [] //显示名称
				},
				//新增弹框
				modal1: {
					show: false,
					title: '新增菜单资源',
					model: {
						id: null,
						name: '',
						wType: "1",
						rType: 1,
						url: '',
						listIndex: 1,
						parentId: -1
					},
					rules: {
						name: [
							{ required: true, message: '请输入资源名称'}
						]
					}
				},
				history: {
					pages: [],
					parents: [{
						name: '首页',
						id: -1
					}]
				}
			}
		},
		computed: {
			/**
			 * 是否为顶级
			 */
			isPLevel() {
				return '-1' === this.form.curParentId;
			},
			/**
			 * 当前的modal1是否为编辑状态
			 */
		    isEdit() {
		      return !Util.vad.isBlank(this.modal1.model.id);
		    },
		    /**
		     * 表格长度
		     */
		    tableLength() {
		    	return this.table.datas.length;
		    }
		},
		mounted() {
			this.init();
			// 当前选择的语言版本
			let getCurrentLanguage=localStorage.getItem('currentLanguage');
			this.$i18n.locale=getCurrentLanguage;
			if(this.$i18n.locale=='en'){
				this.history.parents=[{
					name: 'Home',
					id: -1
				}];
			}
			console.log(getCurrentLanguage)
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				const _this = this;
				let parentId_ = this.form.curParentId;
				this.axios.get('/ws/sys/resources/' + parentId_+'/'+localStorage.getItem('currentLanguage')).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.table.datas = res.data;
					} else {
						
					}
				});
			},
			/**
			 * 查看子节点
			 */
			listChilds(row_) {
				if(row_.wType != 1) {
					return;
				}
				let rowId_ = row_.id;
				let name_ = row_.name;
				this.history.parents.push({
					name: name_,
					id: rowId_
				});
				let curParentId_ = this.form.curParentId;
				this.form.paths.push(curParentId_);
				this.form.names.push(name_);
				this.form.curParentId = rowId_;
				this.init();
			},
			/**
			 * 上一层
			 */
			preList() {
				this.form.names.pop();
				let preParentId_ = this.form.paths.pop();
				this.form.curParentId = preParentId_;
				this.init();
			},
			/**
			 * 顶层
			 */
			topList() {
				this.form.curParentId = '-1';
				this.form.paths = [];
				this.form.names = [];
				this.init();
			},
			/**
			 * 初始化编辑
			 */
			initEdit(row_) {
				const _this = this;
				let cId_ = row_.id;
				let rsv_ = row_.rsv_;
				this.axios.get('/ws/sys/resource/' + cId_ + '/' + rsv_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.buildEditData(res.data);
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('初始化编辑操作失败:' + message_);
					}
				});				
			},
			/**
			 * 构建编辑数据
			 */
			buildEditData(data_) {
				this.modal1.model = {
					id: data_.id,
					name: data_.name,
					wType: data_.wType,
					rType: data_.rType,
					url: data_.url,
					listIndex: data_.listIndex,
					parentId: data_.parentId
				};
			},
			/**
			 * 初始化新增
			 */
			initAdd() {
				this.modal1.model = {
					id: null,
					name: '',
					wType: "1",
					rType: 1,
					url: '',
					listIndex: 1,
					parentId: -1
				};
			},
			/**
			 * 显示新增弹框
			 */
			showAddModal() {
				this.modal1.show = true;
				this.modal1.title = '新增菜单资源';
				this.initAdd();
			},
			/**
			 * 显示编辑弹框
			 */
			showEditModal(row_) {
				this.modal1.show = true;
				this.modal1.title = '编辑菜单资源';
				this.initEdit(row_);
			},
			/**
			 * 保存弹框1内容
			 */
			saveModal1() {
				this.$refs['modal1'].validate((valid) => {
                    if (valid) {
                        this.submitModal1();
                    } 
                });			
			},
			/**
			 * 提交表单
			 */
			submitModal1() {
				if(this.isEdit) {
					this.editDataDict();
				} else {
					this.saveDataDict();
				}
			},
			/**
			 * 保存数据字典
			 */
			saveDataDict() {
				let postData_ = this.modal1.model;
				const _this = this;
				let parentId_ = this.form.curParentId;
				postData_.parentId = parentId_;
				postData_.listIndex = this.tableLength + 1;
				this.axios.post('/ws/sys/resource', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('创建资源成功');
						_this.cancelModal1();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('创建资源失败:' + message_);
					}
				});
			},
			/**
			 * 编辑数据字典
			 */
			editDataDict() {
				let postData_ = this.modal1.model;
				const _this = this;
				this.axios.put('/ws/sys/resource', postData_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改资源成功');
						_this.cancelModal1();
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改资源失败:' + message_);
					}
				});
			},
			/**
			 * 取消弹框1
			 */
			cancelModal1() {
				this.$refs['modal1'].resetFields();
				this.modal1.show = false;
			},
			/**
			 * 删除提示
			 */
			delConfirm(row_) {
				const _this = this;
				this.$confirm({
        			title: '操作提示',
        			width: 300,
        			content: '你确认删除本行记录吗?',
        			onOk: function() {
        				_this.delDatadictRow(row_);
        			}
        		});				
			},
			/**
			 * 删除数据字典项目
			 */
		    delDatadictRow(rowItem_) { //删除行
		      let datadictId = rowItem_.id;
		      let rsv_ = rowItem_.rsv_;
		      const _this = this;
		      this.axios.delete('/ws/sys/resource/' + datadictId + '/' + rsv_).then(function(response) {
		      		let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('删除记录成功');
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('删除资源记录项失败:' + message_);
					}
		      });
		    },
		    /**
		     * 菜单上移
		     */
		    menuUp(row_) {
		    	this.moveMenu(row_, 'up');
		    },
		    /**
		     * 菜单下移
		     */
		    menuDown(row_) {
		    	this.moveMenu(row_, 'down');
		    },
		    /**
		     * 移动菜单
		     */
		    moveMenu(row_, operType_) {
				const _this = this;
				let resourceId_ = row_.id;
				this.axios.put('/ws/sys/resource/index/' + resourceId_  + '/' + operType_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('修改资源成功');
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('修改资源失败:' + message_);
					}
				});		    	
		   },
		   /**
		    * 跳转到资源权限设定页面
		    */
		   toPermissionPage(row_) {
		   	let resourceId = row_.id;
		   	let rsv_ = row_.rsv_;
		   	this.$router.push({name: 'sys_resource_permission', params: { resourceId: resourceId, rsv_:  rsv_}});
		   }
		}
	}
</script>

<style>
	.title-row {
		padding: 10px;
	}
</style>